<template>
  <div class="edit-table-model">
    <div class="add-button-css" v-if="mode != 'hide' && mode != 'bottom'">
      <el-button class="add-button" @click="handleAdd('top')">
        <i class="iconfont icon-add com-icon"></i>添加一行数据
      </el-button>
    </div>
    <el-table
      class="table-model"
      max-height="430"
      :data="tableData"
      :border="true"
      @selection-change="onChange"
      :header-cell-style="{background: variables.tableHeaderBackGroundColor, color: variables.tableHeaderColor}"
    >
      <template v-for="item in tableColumn">
        <el-table-column
          v-if="item.type"
          :type="item.type"
          :label="item.label"
          :width="item.width"
          :align="item.align != null ? item.align : 'left'"
          :fixed="item.fixed"
        />
        <el-table-column
          v-else
          :prop="item.name"
          :label="item.label"
          :width="item.width"
          :align="item.align != null ? item.align : 'left'"
          :fixed="item.fixed"
        >
          <template #default="scope">
            <template v-if="!item.slot">
              <template v-if="item.readonly">
                {{ scope.row[item.name]}}
              </template>
              <template v-else-if="item.valueType == 'select'">
                <el-select
                  class="common-input"
                  style="width: 100%"
                  v-model="scope.row[item.name]"
                  :placeholder='`请输入${item.label}`'
                  v-if="scope.row.edit"
                >
                  <el-option
                    v-for="it in item.options"
                    :key="it.value"
                    :label="it.label"
                    :value="it.value"
                  >
                  </el-option>
                </el-select>
                <span v-else>{{ filterOptions(item,scope) }}</span>
              </template>
              <template v-else-if="item.valueType == 'date'">
                <el-date-picker
                  class="common-input table-date"
                  v-model="scope.row[item.name]"
                  type="date"
                  value-format="yyyy-MM-dd"
                  clearable
                  placeholder="请选择"
                  v-if="scope.row.edit"
                />
                <span v-else>{{ scope.row[item.name] || '--' }}</span>
              </template>
              <template v-else-if="item.valueType == 'input'">
                <el-input
                  v-if="scope.row.edit"
                  class="common-input"
                  v-model="scope.row[item.name]"
                  :placeholder='`请输入${item.label}`'
                  clearable
                ></el-input>
                <span v-else>{{ scope.row[item.name] || '--' }}</span>
              </template>
            </template>
            <slot v-else :name="item.name" :item="item" :row="scope.row"></slot>
          </template>
        </el-table-column>
      </template>
      <el-table-column label="操作" align="left" width="280">
        <template #default="scope">
          <el-button
            v-if="scope.row.edit"
            type="success"
            @click="onSave(scope.row)"
            class="inline-button"
          >
            <i class="iconfont icon-save small-icon"></i>保存
          </el-button>
          <el-button
            v-else
            type="primary"
            @click="onEdit(scope.row)"
            class="inline-button"
          >
            <i class="iconfont icon-edit small-icon"></i>编辑
          </el-button>
          <el-button
            type="danger"
            @click="onDelete(scope.row)"
            class="inline-button"
          >
            <i class="iconfont icon-delete small-icon"></i>删除
          </el-button>
          <el-button
            v-if="scope.row.edit"
            type="warning"
            @click="onCancel(scope.row)"
            class="inline-button"
          >
            <i class="iconfont icon-refresh small-icon"></i>取消
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="add-button-css" v-if="mode != 'hide' && mode != 'top'">
      <el-button class="add-button" @click="handleAdd('bottom')">
        <i class="iconfont icon-add com-icon"></i>添加一行数据
      </el-button>
    </div>
  </div>
</template>

<script>
import variables from '@/styles/variables.scss'

export default {
  name: 'index',
  props:{
    tbData:{
      type: Array,
      default: () => []
    },
    tbColumn:{
      type: Array,
      default: () => []
    },
    mode:{
      type: String,
      default: "bottom"
    },
  },
  data(){
    return{
      tableData: [],
      tableColumn: [],
    }
  },
  watch:{
    tbData:{
      immediate: true,
      deep: true,
      handler(val){
        this.tableData = val
      }
    },
    tbColumn:{
      immediate: true,
      deep: true,
      handler(val){
        this.tableColumn = val
      }
    },
  },
  computed:{
    variables(){
      return variables
    },
    newData(){
      const col = {}
      this.tbColumn.map(item =>{
        if(!col[item.name]){
          col[item.name] = null
        }
      })
      return col
    }
  },
  mounted(){
  },
  methods:{
    // 匹配活动状态
    filterOptions(item, scope){
      const value = item.options.find(it => it.value == scope.row[item.name])
      if(value){
        return value.label
      }
      return '--'
    },
    // 添加数据
    handleAdd(type){
      const id =  ~~(Math.random() * 1000000).toFixed(0)
      const obj = Object.assign({}, this.newData, {
        id: id,
        edit: true,
      })
      if(type == 'bottom'){
        this.tableData.push(obj)
      }
      if(type == 'top'){
        this.tableData.unshift(obj)
      }
      this.$emit('handleAdd')
    },
    // 保存
    onSave(row){
      row.edit = false
    },
    // 编辑
    onEdit(row){
      row.edit = true
    },
    // 删除
    onDelete(row){
      this.$confirm("你确定要删除当前项吗?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData = this.tableData.filter(item => item.id != row.id)
          this.$message.success('删除成功')
          this.$emit('handleDelete')
        })
        .catch(() => {});
    },
    // 取消
    onCancel(row){
      row.edit = false
    },
    onChange(val){
      console.log('选择的行   ============  ',val)
      this.$emit('handleChange',val)
    }
  }
}
</script>

<style lang="scss" scoped>
.add-button-css{
  margin-top: 15px;
  margin-bottom: 15px;
}
.add-button{
  width: 100%;
}
.table-date{
  width: 175px !important;
}
</style>
